<template>
  <div class="class-container">
    <!-- 轮播 -->
    <div class="home-header-container">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img v-lazy="imgUrl + item" />
        </van-swipe-item>
      </van-swipe>
      <search />
    </div>
    <!-- 分类 -->
    <div class="home-class-container">
      <div class="class-item" v-for="(item, index) in classList" :key="index" @click="classClick(item)">
        <img :src="imgUrl + item.indexpic" alt="">
        <p class="class-name">{{ item.name }}</p>
      </div>
    </div>
    <!-- 新品推荐 -->
    <div class="main-container">
      <div class="main-title">
        <img src="~@/assets/icon/hot.png" alt="">
        新品推荐
      </div>
      <div class="main-content">
        <div class="main-item" v-for="(item, index) in productNew" :key="index" @click="details(item)">
          <img :src="imgUrl + item.indexpic" alt="">
          <p class="name">{{ item.title }}</p>
          <div class="price-container">
            <div class="price">$ {{ item.price }}</div>
            <!-- <div class="price1">$ {{ item.price1 }}</div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 新品推荐 -->
    <div class="main-container two">
      <div class="main-title">
        <img src="~@/assets/icon/hot.png" alt="">
        多种选择
      </div>
      <div class="main-content">
        <div class="main-item" v-for="(item, index) in productHot" :key="index" @click="details(item)">
          <img :src="imgUrl + item.indexpic" alt="">
          <p class="name">{{ item.title }}</p>
          <div class="price-container">
            <div class="price">$ {{ item.price }}</div>
            <!-- <div class="price1">$ {{ item.price1 }}</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import search from '@components/search'

export default {
  components: { search },
  data () {
    return {
      id: null,
      bannerList: [],
      classList: [],
      productNew: [],
      productHot: [],
      value: ''
    }
  },
  computed: {
    imgUrl () {
      return this.$imgUrl
    }
  },
  created () {
    this.id = this.$route.query.id
  },
  mounted () {
    this.getClassData()
  },
  methods: {
    details (item) {
      this.$router.push({
        path: '/shopping/details',
        query: {
          id: item.id,
          type: 'new'
        }
      })
    },
    async getClassData () {
      const result = await this.$fetchGet('/home/category/lists', {
        id: this.id
      })
      if (!result.success) {
        this.$toast(result.msg)
        return
      }
      this.classList = result.data.catelists
      this.bannerList = result.data.bannerlist.map(item => item[0])
      this.productNew = result.data.productNew
      this.productHot = result.data.productHot
    },
    /*
     *@name: 客服点击
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-04-27 21:04:37
    */
    kefuCLick () {
      this.$toast('客服点击')
    },
    /*
     *@name: 分类点击
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-04-27 21:09:25
    */
    classClick (item) {
      console.log(item)
      this.$router.push({
        path: `/threeClass`,
        query: {
          id: this.id,
          classId: item.id
        }
      })
    }
  }
}
</script>

<style lang="scss">
.class {
  &-container {
    background: #fafafa;
    height: calc(100vh - 100px);
    overflow-y: auto;
    position: relative;
    .van-swipe {
      height: 500px;
      .van-swipe-item {
        height: 500px;
        img {
          width: 100vw;
          height: 500px;
        }
      }
      // .van-swipe__indicators {
      //   bottom: 100px;
      // }
    }
    .home-class-container {
      width: 100vw;
      background: #fff;
      // position: absolute;
      // left: 10vw;
      // top: 500px;
      // border-radius: 30px;
      padding: 10px;
      box-shadow:  0 0 10px #888;
      // height: 170px;
      .class-item {
        display: inline-block;
        width: 20%;
        padding: 10px;
        text-align: center;
        img {
          width: 100px;
          height: 100px;
        }
        .class-name {
          font-size: 26px;
          white-space: nowrap; 
          overflow: hidden;
          text-overflow:ellipsis;
        }
      }
    }
    .main-container {
      margin-top: 50px;
      box-shadow:  0 0 10px #888;
      background: #fff;
      &.two {
        margin-top: 50px;
      }
      .main-title {
        text-align: center;
        line-height: 100px;
        border-bottom: 1PX solid #E3E3E3;
        font-size: 30px;
        color: #FF4343;
        font-weight: bold;
        img {
          width: 80px;
          height: 20px;
          height: auto;
          vertical-align: middle;
          display: inline-block;
          margin-top: -10px;
        }
      }
      .main-content {
        .main-item {
          width: 50vw;
          display: inline-block;
          text-align: center;
          padding: 50px 0;
          border-bottom: 1PX solid #E3E3E3;
          &:nth-child(2n - 1) {
            border-right: 1PX solid #E3E3E3;
          }
          img {
            width: 200px;
            height: 200px;
          }
          .name {
            margin-top: 20px;
            font-size: 25px;
            font-weight: 600;
            color: #6A6A6A;
          }
          .price-container {
            text-align: center;
            margin-top: 10px;
            .price {
              display: inline-block;
              color: #ff4848;
              margin-right: 20px;
            }
            .price1 {
              display: inline-block;
              color: #dddddd;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
}
</style>